<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!--官方文档 http://www.webgl3d.cn/threejs/docs/ -->
    <canvas id="canvas"></canvas>

    <script type="module">
        import { Color } from 'https://unpkg.com/three/build/three.module.js'

        const canvas = document.querySelector('#canvas')
        const gl = canvas.getContext('webgl')
        // 创建three的颜色对象
        const color = new Color('rgba(255,0,0,1)')

        // 自执行函数的返回值取反，返回值是undefined，转化为布尔值是false，取反是true。
        !(function ani() {
            // 设置颜色便宜， 参数1偏移值， 2亮度 3饱和度
            color.offsetHSL(0.005, 0, 0)
            // 设置颜色
            gl.clearColor(color.r, color.g, color.b, 1)
            // 刷底色
            gl.clear(gl.COLOR_BUFFER_BIT)
            requestAnimationFrame(ani)
        })()
    </script>
</body>

</html>